<template>
  <div class="pet-status">
    <el-empty v-if="petStatusArr.length === 0" description="该宠物还没有状态">
      <el-button type="primary" @click="handleDialogVisible()"
        >添加状态</el-button
      >
    </el-empty>
    <div v-else class="pet-satus-list">
      <el-button
        style="margin: 0 0 10px 10px"
        type="primary"
        @click="handleDialogVisible()"
        >添加状态</el-button
      >
      <el-descriptions
        v-for="(item, index) in petStatusArr"
        :key="item.id"
        class="margin-top"
        :column="4"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-yaopin"></i>
            健康
          </template>
          <el-tag type="danger" v-if="item.isInject === 0">未打针</el-tag>
          <el-tag type="success" v-else>已打针</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-mifan"></i>
            胃口
          </template>
          <el-tag type="danger" v-if="item.isFeed === 0">未喂养</el-tag>
          <el-tag type="success" v-else>已喂养</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-qingjie"></i>
            清洁
          </template>
          <el-tag type="danger" v-if="item.isShower === 0">未洗澡</el-tag>
          <el-tag type="success" v-else>已洗澡</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="iconfont icon-caozuo"></i>
            操作
          </template>
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleDialogVisible(item)"
          ></el-button>
          <el-button
            @click="handleDeleteStatus(item.id)"
            type="danger"
            icon="el-icon-delete"
            size="small"
          ></el-button>
          <el-badge
            v-if="index === petStatusArr.length - 1"
            value="new"
            class="item"
          ></el-badge>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <pet-status-eitor-dialog
      :statusMsg="statusMsg"
      :dialogVisible="statusManageEitorDialogVisible"
      :handleDialogVisible="handleDialogVisible"
      :colseDialogVisible="colseDialogVisible"
      :type="type"
      :typeMsg="typeMsg"
      :getPetStatusMsg="getPetStatusMsg"
    ></pet-status-eitor-dialog>
  </div>
</template>

<script>
import { getPetStatus, deletePetStatus } from "@/apis/home";
import PetStatusEitorDialog from "./PetStatusEitorDialog.vue";
import { EDITOR, ADD, EDITOR_MESSAGE, ADD_MESSAGE } from "@/configs/constant";
export default {
  props: ["petMsg"],
  components: {
    PetStatusEitorDialog,
  },
  mounted() {
    this.getPetStatusMsg();
    this.statusMsg.petId = this.petMsg.id;
    this.statusMsgCopy.petId = this.petMsg.id;
  },
  data() {
    return {
      petStatusArr: [],
      statusMsg: {
        id: 0,
        isFeed: 0,
        isInject: 0,
        isShower: 0,
        petId: 0,
        picture: "",
      },
      statusManageEitorDialogVisible: false,
      statusMsgCopy: {
        id: 0,
        isFeed: 0,
        isInject: 0,
        isShower: 0,
        petId: 0,
        picture: "",
      },
      type: "",
      typeMsg: "",
    };
  },
  methods: {
    async getPetStatusMsg() {
      const { data } = await getPetStatus(this.petMsg.id);
      this.petStatusArr = data;
    },
    handleDialogVisible(statusMsg) {
      this.statusManageEitorDialogVisible =
        !this.statusManageEitorDialogVisible;
      if (statusMsg) {
        this.statusMsg = statusMsg;
        this.type = EDITOR;
        this.typeMsg = EDITOR_MESSAGE;
      } else {
        this.type = ADD;
        this.typeMsg = ADD_MESSAGE;
      }
      if (!this.statusManageEitorDialogVisible) {
        this.statusMsg = { ...this.statusMsgCopy };
      }
    },
    handleDeleteStatus(id) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deletePetStatus(id);
          this.getPetStatusMsg();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    colseDialogVisible() {
      this.statusManageEitorDialogVisible = false;
      this.type = EDITOR
      this.statusMsg = { ...this.statusMsgCopy };
      this.$message.info(`已取消${this.typeMsg}`);
    },
  },
};
</script>

<style scoped lang="less">
:deep .el-descriptions-row {
  position: relative;
}
:deep .el-badge {
  position: absolute;
  top: -6px;
  left: 0;
}
</style>
